<template>
  <view>
    <StatusNav :properties="statusNavProperties"/>
    <view class='productList'>
      <uv-sticky :zIndex="999" :customNavHeight="stickyTop" :offsetTop="stickyTop" bgColor="#fff">
        <view class="heightWrapper">
          <view class="tas">
            <uv-tabs @change="tabListChange" :scrollable="false" :lineColor="themConfig.theme.color" :list="tabList"></uv-tabs>
          </view>

          <view class="order-total">
            <view class="order-total-search">
              <uv-input border="bottom" clearable v-model="searchParams.searchValue" placeholder="订单尾号/手机尾号"
                        @confirm="inputSearch"></uv-input>
            </view>
            <view class="order-total-text">
              数量：{{ dataPage.ext.count || 0 }}
              &nbsp;
              金额：{{ dataPage.ext.amount || 0 }}
            </view>
          </view>
        </view>
      </uv-sticky>
      <uv-gap height="10" v-if="orderData.length > 0" bgColor=""></uv-gap>
      <view v-if="orderData.length > 0" v-for="(item,index) in orderData">
        <OrderList :isLast="index===orderData.length-1" @refresh="refreshList" :type="item.identity" :datas="[item]">
          <template v-slot:orderAmountValue>
            <view class="money" :style="{
                color: themConfig.theme.color
              }">
              <text>酬金：</text>
              <text class="amountValue">{{ item.takeAmount }}</text>
              <text>元</text>
            </view>
          </template>
        </OrderList>
      </view>

       <Empty :show="orderData.length<=0"/>

      <uv-gap height="1" v-if="orderData.length > 0" bgColor=""></uv-gap>
      <uv-load-more v-if="isReachBottom" @loadmore="loadmore" :status="loading.status" :loading-text="loading.loadingText"
                    :loadmore-text="loading.loadmoreText"
                    nomore-text=" "/>
    </view>
    <Tabar :app="getAapp()" :activeIndex="2" ref="tabbar"/>
  </view>
</template>
<script>
import StatusNav from '@/components/school/statusNav';
import PageBody from '@/components/school/pageBody';
import OrderList from '@/components/school/orderList';
import {mapGetters} from "vuex";
import * as OrderApi from '@/api/school/order.js';
import diyJson from '@/config/diy.js';

const app = getApp();

export default {
  computed: mapGetters(['uid', 'schoolId']),
  components: {
    StatusNav,
    PageBody,
    OrderList,
  },
  data() {
    return {
      // #ifdef H5
      stickyTop: 0,
      // #endif
      // #ifdef MP
      stickyTop: 44,
      // #endif
      themConfig: diyJson.commonStyle,
      tabList: [
        {
          "name": "全部",
          "value": ""
        },
        {
          "name": "待审核",
          "value": "11"
        },
        {
          "name": "任务中",
          "value": "2"
        },
        {
          "name": "已完成",
          "value": "3"
        },
        {
          "name": "取消",
          "value": "5"
        }
      ],
      statusNavProperties: { // 筛选条件
        title: "配送单",
        setStyle: diyJson.statusbar.setStyle
      },

      loading: {
        status: 'nomore',
        loadingText: '加载中',
        loadmoreText: '点击加载更多',
      },
      isReachBottom: false,
      orderData: [],
      searchParams: {
        state: undefined
      },
      dataPage: {
        ext: 0,
        total: 0,
        hasNext: false,
        nextId: undefined
      }
    };
  },
  onPullDownRefresh() {
    this.dataList({...this.searchParams, schoolId: this.schoolId});
    uni.stopPullDownRefresh();
  },
  onLoad: function (options) {
    this.dataList({...this.searchParams, schoolId: this.schoolId});
  },
  mounted() {
    this.computeAmountHeight();
  },

  methods: {

    async computeAmountHeight() {
      const query = uni.createSelectorQuery().in(this);
      let that = this;
      query.select('.heightWrapper')
      .boundingClientRect((dome) => {
        console.log("height", dome.height)
        that.pageBody.pageHeight = that.pageBody.pageHeight - dome.height;
      })
      .exec();
    },
    inputSearch() {
      this.dataList({...this.searchParams, schoolId: this.schoolId});
    },

    refreshList() {
      this.dataList({...this.searchParams, schoolId: this.schoolId});
    },
    dataList(params) {
      // 先设置为空 子组件才会刷新
      this.orderData.splice(0, 1);
      OrderApi.takeOrderList(params).then(res => {
        this.orderData = res.data.records;
        this.dataPage.ext = res.data.ext;
        this.dataPage.hasNext = res.data.hasNext;
        if (res.data.nextId) {
          this.dataPage.nextId = res.data.nextId;
        }
      })
    },

    // 状态切换
    tabListChange(item) {
      // console.log('tabListChange',index)
      this.searchParams.state = item.value
      this.loading.status = 'nomore';
      this.dataList({...this.searchParams, schoolId: this.schoolId});
    },

    // 滚到底部
    scrolltolower() {
      this.isReachBottom = true
      this.loading.status = 'nomore';
      if (this.dataPage.hasNext) {
        this.loading.status = 'loadmore';
      }
    },
    loadmore() {
      if (this.dataPage.hasNext) {
        this.loading.status = 'loading';
        OrderApi.takeOrderList({...this.searchParams, schoolId: this.schoolId, nextId: this.dataPage.nextId}).then(res => {
          res.data.records.forEach(item => {
            this.orderData.push(item)
          });

          this.dataPage.ext = res.data.ext;
          this.dataPage.hasNext = res.data.hasNext;
          if (res.data.nextId) {
            this.dataPage.nextId = res.data.nextId;
          }

          this.loading.status = 'loadmore';
        })
      }
    },

    getAapp() {
      return app;
    },
    goback() {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },
  },
  onReachBottom() {
    this.scrolltolower();
  }
}
</script>

<style scoped lang="scss">
///deep/ .uv-tabs__wrapper__nav__item {
//  flex: 1 1 0% !important;
//}

.order-total {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rpx 20rpx 10rpx 20rpx;

  .uv-border-bottom {
    border-bottom: none !important;
  }

  .order-total-text {
    color: #606266;
  }
}
</style>
